<template>
  <div class="homework">
    <div class="campusManagementBox bx">

      <div class="campus br bx">
        <div class="campusManagement_head bx">
          日期：
          <div class="chooseBox  paddingInput date">

            <el-date-picker type="date" v-model="queryDate" placeholder="选择日期" value-format="yyyy-MM-dd" @change='queryBtn'>
            </el-date-picker>
          </div>
          <el-button type="primary" class="queryBtn" :loading="queryBtnFlag" @click="queryBtn">查询</el-button>
        </div>
        <div class="campusManagement_body" v-if="homeworkArr.length>0">
          <div class="campusManagement_couse_li bx" v-for="(item, index) in homeworkArr" :key="index">
            <span class=" ml46">{{item.name}}：</span>
            <div class="chooseBox bx  w670 ">
              <textarea name="" id="" cols="30" rows="10" v-model="item.homework"  ></textarea>
            </div>
          </div>
          <div class="campusManagement_couse_li bx">
            <el-button type="primary" class="common_title_btn " :loading="pushDataFlag" @click='pushData' :disabled='queryDate!=todayDate'>保存</el-button>
          </div>
        </div>
        <div class="campusManagement_body" v-if="homeworkArr.length==0">
            <h2  class="noData">暂无数据</h2>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  import {
    http
  } from "../../../api/config"; //引入请求
  export default {
    name: 'homework',
    data() {
      return {
        class_id: '',
        queryBtnFlag: false,
        pushDataFlag: false,
        queryDate: '',
        todayDate:'',
        homeworkArr: []
      }
    },
    methods: {
      queryBtn() {
        //点击查询
        this.queryBtnFlag = true;
        // var page = 1;
        // var pagesize = 
        this.getData();

      },
      getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
        return currentdate;
      },
      getData() { //获取数据

        // console.log(page + '_' + pagesize)
        let _this = this;
        let class_id = _this.class_id;
        let date = _this.queryDate;


      },
      pushData() {
        let arr = [];
        let _this = this;
        let class_id = _this.class_id;
        _this.pushDataFlag=true;
        _this.homeworkArr.map((e, i) => {
          arr[i] = {
            "course_id": e.id,
            "content": e.homework
          }
        })
        //console.log(JSON.stringify(arr))

        
      }

    },


    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      });


    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .homework {
    width: 100%;
    height: 100%;
  }

  .campusManagementBox {
    width: 100%;
    height: 100%;
    /* padding-top: 98px; */
    position: relative;
  }

  .campus {
    width: 100%;
    height: 100%;
    background: #fff;
    padding-top: 110px;
    position: relative;
  }

  .campusManagement_head {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    padding-left: 120px;
  }

  .campusManagement_body {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
  }

  .campusManagement_couse_li {
    display: flex;
    padding-left: 156px;
    /* width: 1280px; */
    margin-bottom: 40px;
    position: relative;
    height: 96px;
  }

  .campusManagement_couse_li span {
    position: absolute;
    left: 120px;
    top: 0;
  }

  .campusManagement_couse_li .chooseBox {
    width: 1090px;
    height: 100%;
    border-radius: 10px;
    margin-left: 20px;
  }

  .chooseBox textarea {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    border-radius: 10px;
    resize: none;
    padding: 10px;
    box-sizing: border-box;

  }

  .queryBtn {
    margin-left: 30px;
  }

  .common_title_btn {
    position: absolute;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
  }

</style>
